import React, { Suspense } from 'react'
import history from './utils/history'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import './App.scss'
// const Login = React.lazy(() => import('../src/pages/Login'))
import Login from './pages/Login'
import Home from './pages/Layout'
import Edit from './pages/Profile/Edit'
import Chat from './pages/Profile/Chat'
import AuthRouter from './components/AuthRoute'
import ProfileFeedback from './pages/Profile/Feedback'

export default function App() {
  return (
    // 注意，BrowserRouter等价于 Router history={history}
    <Router history={history}>
      <div className="app">
        {/* <Link to="/login">登录</Link>
        <Link to="/home">首页</Link> */}
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            <Route path="/home" component={Home}></Route>
            <Route path="/login" component={Login}></Route>
            {/* 需要登录才能访问 */}
            <AuthRouter path="/profile/edit" component={Edit}></AuthRouter>
            <AuthRouter path="/profile/chat" component={Chat}></AuthRouter>
            <AuthRouter
              path="/profile/feedback"
              component={ProfileFeedback}
            ></AuthRouter>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
